<template>
	<view class="main">
		<tou_hand1 handtitle='查询用户'></tou_hand1>
		<view class="show">
			<view class="newtap">
				<view class="newone">
					<view class="newonetap" :class="shownum==index?'newonetap1':'newonetap'" v-for="(item,index) in disMsg" :key="index" @click="xbtn(index,item.nums,item.disRate,item.id)">
						<view class="newonetapleft">
							{{item.nums}}期 （{{item.nums*30}}天）
						</view>
						<view class="newonetapright">
							<view class="newonetaprighttxt">
								<span v-show="item.disRate!=0">原价 {{(price*item.nums).toFixed(2)}}元</span>
							</view>
							<view class="newonetaprighttxt1">
							<span v-show="item.disRate!=0">{{(price*item.nums*item.disRate).toFixed(2)}}元</span>
							<span v-show="item.disRate==0">{{(price*item.nums).toFixed(2)}}元</span>
							</view>
						</view>
						<view class="newonetapdb" v-show="item.disRate!=0">{{(item.disRate*10).toFixed(2)}}折 （¥{{((price*item.disRate)/30).toFixed(2)}}元/天）</view>
					</view>
				</view>
			</view>
			<view class="dibu">
				<view class="dibutxt">{{znum}}元</view>
				<view class="dibutap" @click="buybtn">购买套餐</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import tou_hand1 from '../../components/tou_hand1/tou_hand1.vue'
	// import {
	// 	Dialog
	// } from 'vant';
	export default {
		components: {tou_hand1},
		mounted() {
			
		},

		data() {
			return {
				disMsg:[],
				packageId:'',//套餐Id
				price:0,
				shownum:0,
				znum:0,
				stepId:'',
				userId:'',
			}
		},
		onLoad(options) {
			this.disMsg=JSON.parse(options.disMsg)
			this.packageId=options.packageId
			this.price=options.price
			this.xbtn(0,this.disMsg[0].nums,this.disMsg[0].disRate,this.disMsg[0].id)
			this.userId=options.userId
			console.log(this.disMsg)
		},
		onShow() {
			
		},
		methods: {
			xbtn(index,nums,disRate,id){
				this.shownum=index
				this.stepId=id
				if(disRate==0){
					this.znum=nums*this.price
				}else{
					this.znum=nums*this.price*disRate
				}
				
			},
			buybtn(){
				let data={
					packageId:this.packageId,
					stepId:this.stepId,
					userId:this.userId
				}
				uni.showLoading({
					title: '请稍候',
					mask: true
				})
				this.$base.request('recharge/buyParkingPackage', 'POST', data)
					.then(res => {
						if (res.data.code == 200) {
							uni.hideLoading()
							// this.$toast.success('购买成功')
							Dialog.alert({
								message: '购买成功',
							}).then(() => {
								
							})
						} else {
							uni.hideLoading()
							this.$toast.fail(res.data.msg)	
						}
					})
					.catch(err => {
				
					})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		// overflow-x: hidden;
		/deep/.van-list__finished-text{
			margin-top: 100upx;
			padding-bottom: 200upx;
		}
		/deep/.van-hairline--top-bottom::after{
			border-width: 0;
		}
		.show{
			width: 100%;
			box-sizing: border-box;
			.newtap {
				width: 100%;
				padding: 10upx 35upx;
				box-sizing: border-box;
			
				.newone {
					width: 100%;
					box-sizing: border-box;
					margin: 0 auto;
					margin-top: 20upx;
					margin-bottom: 150upx;
					.newonetap {
						align-items: center;
						display: flex;
						justify-content: space-between;
						padding: 40upx 20upx;
						box-sizing: border-box;
						position: relative;
						margin-bottom: 20upx;
						background-color:#FFFFFF;
						border-radius: 16upx;
						border: 1upx solid #dcdcdc;
						.newonetapleft {
							font-size: 26upx;
							font-family: PingFang SC Bold, PingFang SC Bold-Bold;
							font-weight: 700;
							color: #6f6f6f;
						}
						.newonetapright{
							display: flex;
							align-items: center;
							.newonetaprighttxt{
								font-size: 24upx;
								font-family: PingFang SC Bold, PingFang SC Bold-Bold;
								font-weight: 700;
								color: #6f6f6f;
								text-decoration: line-through;
								margin-right: 35upx;
							}
							.newonetaprighttxt1{
								font-size: 36upx;
								font-family: PingFang SC Bold, PingFang SC Bold-Bold;
								font-weight: 700;
								color: #111;
							}
						}
						.newonetapdb{
							position: absolute;
							bottom: 8upx;
							right: 0upx;
							font-size: 24upx;
							font-family: PingFang SC Bold, PingFang SC Bold-Bold;
							font-weight: 700;
							color: #4b98ed;
						}
					}
					.newonetap1{
						align-items: center;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						padding: 40upx 20upx;
						box-sizing: border-box;
						position: relative;
						border: 1upx solid #4b98ed;
						margin-bottom: 20upx;
						background-color: #4b98ed;
						border-radius: 16upx;
						.newonetapleft {
							font-size: 26upx;
							font-family: PingFang SC Bold, PingFang SC Bold-Bold;
							font-weight: 700;
							color: #D0D0D0;
						}
						.newonetapright{
							display: flex;
							align-items: center;
							.newonetaprighttxt{
								font-size: 24upx;
								font-family: PingFang SC Bold, PingFang SC Bold-Bold;
								font-weight: 700;
								color: #D0D0D0;
								text-decoration: line-through;
								margin-right: 35upx;
							}
							.newonetaprighttxt1{
								font-size: 36upx;
								font-family: PingFang SC Bold, PingFang SC Bold-Bold;
								font-weight: 700;
								color: #fff;
							}
						}
						.newonetapdb{
							position: absolute;
							bottom: 8upx;
							right: 0upx;
							font-size: 24upx;
							font-family: PingFang SC Bold, PingFang SC Bold-Bold;
							font-weight: 700;
							color: #FFA02E;
						}
					}
				}
			}
			.dibu{
				display: flex;
				width: 100%;
				justify-content: space-between;
				align-items: center;
				position: fixed;
				bottom: 20upx;
				padding: 0 35upx;
				box-sizing: border-box;
				.dibutxt{
					font-size: 36upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					color: #4b98ed;
				}
				.dibutap{
					width: 300upx;
					font-size: 28upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					color: #fff;
					background: #4b98ed;
					padding: 20upx;
					border-radius: 40upx;
					text-align: center;
				}
			}
			
		
		}
		
	}
</style>
